import React from 'react';
import {
    ActivityIndicator,
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    SectionList, TouchableOpacity, DeviceEventEmitter, TextInput, Modal
} from 'react-native';

//引入

import Styles from './Styles';
import Httpc from "../../../utils/Httpc";
import DLTREQUEST from "./DLTREQUEST";

const { width, height } = Dimensions.get('window')

export default class DLTNewLottery extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            info: null,
        };
        this.Number = '';//当前期号
    }
    static navigationOptions = {
        title: '最新开奖',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#d0162e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            //fontWeight: 'bold',
        },
    }
    componentWillMount() {

    }
    componentWillUnmount() {


    }
    componentDidMount() {
        const { navigation } = this.props;
        this.Number = navigation.getParam("Number");
        this.getServerData();

    }
    getServerData() {
        var data={};
        if(!!this.Number){
            data.Number = this.Number;
        }
        Httpc.get(DLTREQUEST.DLTNewGlottoRecode, data, function (res) {
            this.setState({
                info: res.Data[0]
            });
        }.bind(this))
    }
    on_DLTGame=()=>{
        this.props.navigation.navigate('DLTGame');
    }
    render() {
        let { info } = this.state;
        if (info == null) {
            return (
                <View></View>
            );
        }
        let ball = info.Result.split('|');
        let red_ball = ball[0].split(',');
        let blue_ball = ball[1].split(',');
        var Detail = JSON.parse(info.Detail);
        var DetailAdd = JSON.parse(info.DetailAdd);
        return (
            <View style={[Styles.container, { backgroundColor: '#f7f7f7' }]}>
                <ScrollView>
                    <View style={{ backgroundColor: '#ffffff' }}>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', width: width, height: 50 }}>
                            <View style={{ flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', width: width / 2 }}>
                                <Text style={{ fontSize: 16, color: '#434343' }}>大乐透</Text>
                                <Text style={{ fontSize: 14, color: '#666666' }}>{info.Number}期</Text>
                            </View>
                            <View style={{ width: width / 2, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={{ fontSize: 14, color: '#666666' }}>开奖时间:{info.Opentime.substr(0, 16)}</Text>
                            </View>

                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: 16, height: 25 }}>
                            <View style={Styles.red_ball_on}>
                                <Text style={{ color: '#ffffff' }}>{red_ball[0]}</Text>
                            </View>
                            <View style={Styles.red_ball_on}>
                                <Text style={{ color: '#ffffff' }}>{red_ball[1]}</Text>
                            </View>
                            <View style={Styles.red_ball_on}>
                                <Text style={{ color: '#ffffff' }}>{red_ball[2]}</Text>
                            </View>
                            <View style={Styles.red_ball_on}>
                                <Text style={{ color: '#ffffff' }}>{red_ball[3]}</Text>
                            </View>
                            <View style={Styles.red_ball_on}>
                                <Text style={{ color: '#ffffff' }}>{red_ball[4]}</Text>
                            </View>
                            <View style={Styles.blue_ball_on}>
                                <Text style={{ color: '#ffffff' }}>{blue_ball[0]}</Text>
                            </View>
                            <View style={Styles.blue_ball_on}>
                                <Text style={{ color: '#ffffff' }}>{blue_ball[1]}</Text>
                            </View>

                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width, margin: 20 }}>
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', borderWidth: 0.5, borderColor: '#e9e9e9', width: (width - 80) / 2, marginRight: 40 }}>
                                <Text style={{ backgroundColor: '#e9e9e9', width: (width - 80) / 2, height: 33, lineHeight: 33, textAlign: 'center' }}>本期销售</Text>
                                <Text style={{ height: 33, lineHeight: 33 }}>{info.CoinAmount}元</Text>
                            </View>
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', borderWidth: 0.5, borderColor: '#e9e9e9', width: (width - 80) / 2 }}>
                                <Text style={{ backgroundColor: '#e9e9e9', width: (width - 80) / 2, height: 33, lineHeight: 33, textAlign: 'center' }}>奖池滚存</Text>
                                <Text style={{ height: 33, lineHeight: 33 }}>{info.CoinSell}元</Text>
                            </View>
                        </View>
                    </View>
                    <View style={{ backgroundColor: '#ffffff', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginTop: 20 }}>
                        <Text style={{ height: 33, color: '#434343', lineHeight: 33 }}>本期中奖情况</Text>
                        <View style={{ backgroundColor: '#f7f7f7', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width, height: 33 }}>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>奖项</Text>
                            <Text style={{ width: width / 3, textAlign: 'center', borderLeftColor: '#ffffff', borderLeftWidth: 1, borderRightColor: '#ffffff', borderRightWidth: 1, height: 33, lineHeight: 33 }}>中奖注数(注)</Text>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>单注奖金(元)</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width, borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>一等奖</Text>
                            <Text style={{ width: width / 3, textAlign: 'center', borderLeftColor: '#f7f7f7', borderLeftWidth: 1, borderRightColor: '#f7f7f7', borderRightWidth: 1, height: 33, lineHeight: 33 }}>{Detail[0].Piece}</Text>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>{Detail[0].Money}元</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width, borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>追加</Text>
                            <Text style={{ width: width / 3, textAlign: 'center', borderLeftColor: '#f7f7f7', borderLeftWidth: 1, borderRightColor: '#f7f7f7', borderRightWidth: 1, height: 33, lineHeight: 33 }}>{DetailAdd[0].Piece}</Text>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>{DetailAdd[0].Money}元</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width, borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>二等奖</Text>
                            <Text style={{ width: width / 3, textAlign: 'center', borderLeftColor: '#f7f7f7', borderLeftWidth: 1, borderRightColor: '#f7f7f7', borderRightWidth: 1, height: 33, lineHeight: 33 }}>{Detail[1].Piece}</Text>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>{Detail[1].Money}元</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width, borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>追加</Text>
                            <Text style={{ width: width / 3, textAlign: 'center', borderLeftColor: '#f7f7f7', borderLeftWidth: 1, borderRightColor: '#f7f7f7', borderRightWidth: 1, height: 33, lineHeight: 33 }}>{DetailAdd[1].Piece}</Text>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>{DetailAdd[1].Piece}元</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width, borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>三等奖</Text>
                            <Text style={{ width: width / 3, textAlign: 'center', borderLeftColor: '#f7f7f7', borderLeftWidth: 1, borderRightColor: '#f7f7f7', borderRightWidth: 1, height: 33, lineHeight: 33 }}>{Detail[2].Piece}</Text>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>{Detail[2].Money}元</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width, borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>四等奖</Text>
                            <Text style={{ width: width / 3, textAlign: 'center', borderLeftColor: '#f7f7f7', borderLeftWidth: 1, borderRightColor: '#f7f7f7', borderRightWidth: 1, height: 33, lineHeight: 33 }}>{Detail[3].Piece}</Text>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>{Detail[3].Money}元</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width, borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>五等奖</Text>
                            <Text style={{ width: width / 3, textAlign: 'center', borderLeftColor: '#f7f7f7', borderLeftWidth: 1, borderRightColor: '#f7f7f7', borderRightWidth: 1, height: 33, lineHeight: 33 }}>{Detail[4].Piece}</Text>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>{Detail[4].Money}元</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width, borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>六等奖</Text>
                            <Text style={{ width: width / 3, textAlign: 'center', borderLeftColor: '#f7f7f7', borderLeftWidth: 1, borderRightColor: '#f7f7f7', borderRightWidth: 1, height: 33, lineHeight: 33 }}>{Detail[5].Piece}</Text>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>{Detail[5].Money}元</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width, borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>七等奖</Text>
                            <Text style={{ width: width / 3, textAlign: 'center', borderLeftColor: '#f7f7f7', borderLeftWidth: 1, borderRightColor: '#f7f7f7', borderRightWidth: 1, height: 33, lineHeight: 33 }}>{Detail[6].Piece}</Text>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>{Detail[6].Money}元</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width, borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>八等奖</Text>
                            <Text style={{ width: width / 3, textAlign: 'center', borderLeftColor: '#f7f7f7', borderLeftWidth: 1, borderRightColor: '#f7f7f7', borderRightWidth: 1, height: 33, lineHeight: 33 }}>{Detail[7].Piece}</Text>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>{Detail[7].Money}元</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width, borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>九等奖</Text>
                            <Text style={{ width: width / 3, textAlign: 'center', borderLeftColor: '#f7f7f7', borderLeftWidth: 1, borderRightColor: '#f7f7f7', borderRightWidth: 1, height: 33, lineHeight: 33 }}>{Detail[8].Piece}</Text>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>{Detail[8].Money}元</Text>
                        </View>
                    </View>
                </ScrollView>
                <TouchableOpacity style={{width:width - 16,height:40,margin:8,backgroundColor:'#d2142e',flexDirection:'column',justifyContent:'center',alignItems:'center'}} onPress={() => this.on_DLTGame()}>
                    <Text style={{color:'#ffffff'}}>大乐透投注</Text>
                </TouchableOpacity>
            </View>
        )
    }
}
